<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="100px" class="app-content" ref="ruleForm" label-position='left'>
            <div class="box">
            <div class="appTitle"><span v-if="this.$route.params.oder=='0'">审核银行卡（学校）</span><span v-if="this.$route.params.oder=='1'">审核银行卡（经销商）</span></div>
                <el-row>     
                    <el-col :span="9" class='boxCon'>
                        <el-row>
                            <div class="appTop"><P>身份证信息</p></div>
                            <table class='table' align="left">
                                <tr><td>姓名：</td><td>{{userName}}</td></tr>
                                <tr><td>身份证号：</td><td>{{cardNum}}</td></tr>
                            </table>
                        </el-row>
                        <el-row>
                            <div class="appTop"><P>其他材料</p></div>
                            <table class='table' align="left">
                                <tr v-if="this.$route.params.oder=='0'"><td>事业单位法人证书：</td><td><a :href="licene" :download="download(licene)" v-if='licene'>点击下载</a><span v-if='!licene'>无</span></td></tr>
                                <tr v-if="this.$route.params.oder=='1'"><td>营业执照：</td><td><a :href="licene" :download="download(licene)" v-if='licene'>点击下载</a><span v-if='!licene'>无</span></td></tr>
                                <tr><td>开户许可证：</td><td><span v-if='!openAccount'>无</span><a :href="openAccount" v-if='openAccount' :download="download(openAccount)">点击下载</a></td></tr>
                                <tr><td>委托书：</td><td><span v-if='!proxyLetter'>无</span><a :href="proxyLetter" v-if='proxyLetter' :download="download(proxyLetter)">点击下载</a></td></tr>
                                <tr><td>手持身份证正面：</td><td><a :href="cardFace" :download="download(cardFace)" v-if='cardFace'>点击下载</a><span v-if='!cardFace'>无</span></td></tr>
                                <tr><td>手持身份证反面：</td><td><a :href="cardBack" :download="download(cardBack)" v-if='cardBack'>点击下载</a><span v-if='!cardBack'>无</span></td></tr>
                            </table>
                        </el-row>
                    </el-col>
                    <el-col :span="9" :offset="5">
                        <div class="appTop"><P>银行账户信息</p></div>
                        <table class='table' align="left">
                            <tr><td>银行卡开户名：</td><td>{{accountName}}</td></tr>
                            <tr><td>账户：</td><td>{{account}}</td></tr>
                            <tr><td>所属银行：</td><td>{{bankName}}</td></tr>
                            <tr><td>开户行所在城市：</td><td>{{bankAddress}}</td></tr>
                            <tr><td>开户行名称：</td><td>{{openName}}</td></tr>
                            <tr><td>预留手机号：</td><td>{{telephone}}</td></tr>
                        </table>
                    </el-col>
                </el-row>

                <el-row class='boxCon'>            
                    <el-col :span="9">
                        <div class="appTop"><P>审核信息</p></div>
                        <table class='table' align="left">
                            <tr><td>机构类别：</td><td><span v-if="this.$route.params.oder=='0'">学校</span><span v-if="this.$route.params.oder=='1'">经销商</span></td></tr>
                            <tr><td>机构名称：</td><td>{{orgName}}</td></tr>
                            <tr><td>地区：</td><td><el-button type='text' @click='areaDetail' v-if="this.$route.params.oder=='1'">详情</el-button><span v-if="this.$route.params.oder=='0'">{{orgAddress}}</span></td></tr>
                            <tr v-if="this.$route.params.oder=='0'"><td>负责人：</td><td><el-button type='text' @click='nameDetail'>详情</el-button></td></tr>
                            <tr v-if="this.$route.params.oder=='1'"><td>负责人：</td><td>{{resName}}</td></tr>
                            <tr v-if="this.$route.params.oder=='1'"><td>手机号：</td><td>{{mobile}}</td></tr>
                            <tr><td>申请时间：</td><td>{{auditTime}}</td></tr>
                        </table>
                    </el-col>
                </el-row>


                <el-dialog title="查看负责人信息" :visible.sync="dialogFormVisible1" size="tiny">
                    <div class='checkImg2'>
                        <table class='dialogTable' align="left">
                            <tr><th>姓名</th><th>手机号</th></tr>
                            <tr v-for='(item,index) in peopleList' :key="index"><td>{{item.name}}</td><td>{{item.mobile}}</td></tr>
                        </table>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogFormVisible1=false">确定</el-button>
                    </div>
                </el-dialog> 

                <el-dialog title="查看代理区域" :visible.sync="dialogFormVisible2" size="tiny">
                    <div class='checkImg2'>
                        <table class='dialogTable3' align="left">
                            <tr v-for='(item,index) in areaList' :key="index"><td>代理区域{{index+1}}</td><td>{{item}}</td></tr>
                        </table>
                    </div>
                    <div slot="footer" class="dialog-footer3">
                        <el-button type="primary" @click="dialogFormVisible2=false">确定</el-button>
                    </div>
                </el-dialog> 

                <el-dialog title="审核银行卡" :visible.sync="dialogFormVisible3" size="tiny">
                    <el-form label-width="80px" class="dialogForm" ref="dialogForm" :model="dialogForm" :rules="rules">
                        <el-row class='bhReason'>
                            <el-col :span='15' :offset='7'>
                                <el-radio-group v-model="radio" @change='changeRadio'>
                                    <el-radio class="radio" label="0">同意</el-radio>
                                    <el-radio class="radio radioCol" label="1">驳回</el-radio>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                        <el-row v-if='radio=="0"' class="rowTop">
                            <el-col :span='15' :offset='6'>
                                <el-form-item>
                                    <span class="note">还请仔细审核！</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row v-if='radio=="1"'>
                            <el-col :span='20' :offset="1">
                                <div>
                                    <el-form-item prop='excuse' label="驳回原因">
                                        <el-popover placement="top-start" trigger="focus" content="字符长度不大于30个">
                                            <el-input v-model="dialogForm.excuse"  type="textarea" :rows="6" placeholder="请输入驳回原因" slot="reference" :maxlength="30"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible3=false">取消</el-button>
                        <el-button type="primary" @click="checkExam('dialogForm')" :loading="loadingBtn">确定</el-button>
                    </div>
                </el-dialog>                

                <el-form-item class="footer">
                    <el-button @click="resetForm">返回</el-button>
                    <el-button type="primary" @click="exam">审核</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import {auditMessage, getPeople, updateStatus, address} from 'api/examineMangement';
export default{
    name: 'examDetail',
    components: { Levelbar, startDate, endDate, province, city, region },
    data() {
        var validate = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('驳回原因不能为空'));
            } else if (value.trim()=='') {
                callback(new Error('请勿纯空格输入'));
            } else {
                callback();
            }
        };
        return { 
            openAccount: '', // 开户许可证
            account: '', // 账户
            bankAddress: '', // 开户行所在城市
            userName: '', // 姓名
            cardNum: '', // 身份证
            cardFace: '', // 正面照
            cardBack: '', // 反面照
            proxyLetter: '', // 委托书
            licene: '', // 营业执照
            accountName: '', // 银行卡开户名
            bankName: '', // 所属银行
            openName: '', // 开户行名称
            telephone: '', // 电话号码
            orgType: '', // 机构类别
            orgName: '', // 机构名称
            auditTime: '', // 申请时间
            reason: '', // 驳回原因
            radio: '0',
            orgAddress: '',
            resName: '',
            mobile: '',
            orgState: '', // 对公对私
            peopleList: [], // 负责人列表
            areaList: [], // 负责区域列表
            responseList: [],
            dialogFormVisible1: false, // 负责人弹窗
            dialogFormVisible2: false, // 负责区域弹窗
            dialogFormVisible3: false, // 账户审核弹窗
            loadingBtn: false,
            dialogForm: {
                orgName: '',
                excuse: ''
            },
            rules: {
                excuse: [
                    { required: true, validator: validate, trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getInfo();
    },
    methods: {
        // 提交
        getInfo() {
            auditMessage(this.$route.params.id, this.$route.params.orgId, this.$route.params.oder).then(res => {
                this.orgState = res.data.content.orgState;
                this.account = res.data.content.account;
                this.accountName = res.data.content.accountName;
                this.bankAddress = res.data.content.bankAddress;
                this.userName = res.data.content.cardName;
                this.cardNum = res.data.content.cardNum;
                this.openAccount = res.data.content.openAccount;
                this.cardBack = res.data.content.cardBack;
                this.cardFace = res.data.content.cardFace;
                this.proxyLetter = res.data.content.proxyLetter;
                this.licene = res.data.content.licene;
                this.bankName = res.data.content.bankName;
                this.openName = res.data.content.openName;
                this.telephone = res.data.content.telephone;
                this.orgType = res.data.content.orgType;
                this.orgName = res.data.content.orgName;
                this.bankName = res.data.content.bankName;
                this.openName = res.data.content.openName;
                this.auditTime = res.data.content.auditTime;
                this.reason = res.data.content.reason;
                this.orgAddress = res.data.content.orgAddress;
                this.resName = res.data.content.name;
                this.mobile = res.data.content.mobile;
            })
        },
        download(link) {
            if (link) {
                return link.split('/')[link.split('/').length-1];
            }
        },
        areaDetail() {
            if (this.$route.params.oder=='1') {
                address(this.$route.params.orgId).then(res => {
                    this.areaList = res.data.content;
                })
                this.dialogFormVisible2 = true;
            }
        },
        nameDetail() {
            if (this.$route.params.oder=='0') {
                getPeople(this.$route.params.orgId).then(res => {
                    this.peopleList = res.data.content;
                })
                this.dialogFormVisible1 = true;
            } 
        },
        exam() {
            this.radio = '0';
            this.dialogForm.excuse = '';
            this.dialogFormVisible3 = true;
        },
        changeRadio(a) {
            this.dialogForm.excuse = '';
        },
        checkExam(dialogForm) {
            this.$refs[dialogForm].validate((valid) => {
                if (valid) {
                    let str = this.radio=='0' ? '通过' : '驳回';
                    this.$confirm('确定要'+str+'该账户审核?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn = true;
                        updateStatus(this.$route.params.id, this.radio, this.dialogForm.excuse).then(res => {
                            this.loadingBtn = false;
                            this.$message.success('已'+str);
                            this.$store.dispatch('UpdateCache', true);// 修改 和查看
                            window.history.back();
                        }).catch(() => {
                            this.loadingBtn = false;
                        })
                        this.dialogFormVisible3 = false;
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                }
            })
        },
        resetForm() {
            window.history.back();
        }
    }
}

</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .table{
        text-align:left;
        th,td{
            padding:0 20px;
            width:200px;
            height:40px;
            font-size:14px;
        }
        a{
            font-size:15px;
            color:#ff5e2c;
        }
    }
    .bhReason{
        margin-bottom:30px;
    }
    .dialogForm{
        padding:15px 0 0 0 !important;
    }
    .radioCol{
        margin-left:110px !important;
    }
    .app-content{
        .box{
            padding:0 50px;
        }
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:30px;
        .appTop{
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        
        .footer {
            text-align: center;
            margin-top: 60px;
        }
    }
    .dialog-footer{
        .el-button{
            margin-top: 60px;
        }
        text-align: center;
    }
    .dialogTable{
        text-align:center;
        margin-left:50px;
        margin-top:30px;
        th{
            background:#f3f3f3;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            width:220px;
            height:40px;
        }
    }
    .dialog-footer3{
        .el-button{
            margin: 50px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable3{
        text-align:center;
        margin-top:30px;
        margin:30px 50px;
        tr td:nth-of-type(1){
            width:30%;
        }
        tr td:nth-of-type(2){
            width:310px;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            width:220px;
            height:40px;
        }
    }
    .note{
        font-size:18px !important;
    }
    .rowTop{
        padding-top:20px;
    }
    
}

</style>
